<template>
    <div class="nav-content">
        <div class="nav">
            <router-link :to ="{name:'home'}" :exact="true" >首页</router-link>
            <router-link :to ="{name:'userCenter'}" >个人中心</router-link>
            <router-link :to="{name:'userBookList'}" >我的书架</router-link>
            <router-link :to="{name:'top'}">排行榜</router-link>
            <span class="detalist" v-show="getlocation">书籍详情</span>
            <!-- <router-link :to="{name:'detalist'}" v-show="getlocation" >书籍详情</router-link> -->
            <button class="login-button" @click="login" 
            @mouseleave="loginleave"
                 @mouseover="isLoginShowOutLogin">
                
                <svg t="1638955768341" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2369" width="25" height="25"><path d="M575.215 547.318c53.367-24.316 90.562-78.011 90.562-140.522 0-85.257-69.149-154.383-154.406-154.383-85.299 0-154.427 69.126-154.427 154.383 0 62.49 37.172 116.185 90.562 140.522-87.156 27.24-150.586 108.698-150.586 204.715 0 12.071 9.779 21.827 21.827 21.827s21.827-9.756 21.827-21.827c0-94.161 76.613-170.774 170.776-170.774 94.184 0 170.797 76.613 170.797 170.774 0 12.071 9.756 21.827 21.827 21.827 12.07 0 21.827-9.756 21.827-21.827 0.021-95.994-63.43-177.475-150.586-204.715zM400.621 406.817c0-61.072 49.678-110.729 110.773-110.729 61.072 0 110.75 49.657 110.75 110.729 0 61.094-49.678 110.794-110.75 110.794-61.095 0-110.773-49.7-110.773-110.794z" p-id="2370" fill="#ffffff"></path><path d="M511.371 960.81c-246.951 0-447.869-200.918-447.869-447.891 0-246.93 200.919-447.871 447.869-447.871 246.973 0 447.892 200.919 447.892 447.871 0 246.973-200.919 447.891-447.892 447.891z m0-854.269c-224.098 0-406.398 182.301-406.398 406.377s182.3 406.397 406.398 406.397c224.099 0 406.42-182.321 406.42-406.397S735.47 106.541 511.371 106.541z" p-id="2371" 
                :fill="loginStatusColor"></path></svg>
                 <span>{{loginStatus}}</span>
            </button>
            <div class="out-login" @mouseleave="loginleave"
             @mouseover="isLoginShowOutLogin"
             @click="outLogin"
              :style="{display:isOutLogin}">
                <svg t="1639103611466" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2040" width="20" height="20"><path d="M733.866667 469.333333l-46.933334-46.933333 59.733334-59.733333L896 512l-149.333333 149.333333-59.733334-64 42.666667-42.666666H512v-85.333334h221.866667zM725.333333 341.333333h-85.333333V256H341.333333v512h298.666667v-85.333333h85.333333v170.666666H256V170.666667h469.333333v170.666666z" 
                fill="#ffffff" p-id="2041"></path></svg>
               <span>登出</span></div>
        </div>
        <Login />
    </div>
</template>

<script>

import Login from '../../components/login.vue'
export default {
    
    props:["userId"],
    data(){
        return{
            dialogFormVisible:false,
            isOutLogin:"none",
            clearout:null,
            outin:false,
            deatlist:false
        }
    },
     computed:{
        loginStatus(){
          return store.state.loginUser.loging && $Cookies.get("userId") ? "已登录" : "登录" ;
        },
        loginStatusColor(){
          return store.state.loginUser.loging  && $Cookies.get("userId") ?"#269826":"#fff";
        },
        getlocation(){
            return store.getters.getDetalist;
        }
    },
    components:{
        Login
    },
    created(){
        if($Cookies.get("userId"))
           store.commit("setLogin",true)
    },
    methods:{

        login(){
          if(!store.state.loginUser.loging){
                 store.commit("setLoginGui",true);
          }else{
              if(location.pathname === '/userCenter'){
                  return;
              }
              this.$router.push({name:"userCenter"});
          }
            
        },
        outLogin(){
            store.commit("setLogin",false);
            store.commit("setUser",null);
            $Cookies.remove("userId");
            this.isOutLogin = 'none'
             this.$message({
                      showClose: true,
                      message: '已登出！',
                      type: 'success'
                });
            this.$router.push("/");
        },
        isLoginShowOutLogin(){
            if(store.state.loginUser.loging){
                clearTimeout(this.clearout);
                this.isOutLogin = 'inline-block';

            }
        },
        loginleave(){
             this.outin =false;
               this.clearout = setTimeout(()=>{
                   this.isOutLogin = 'none';
                },1500)
              
            
        }
    },
}
</script>
<style lang="less"  scoped>
 @media screen and (max-width:600px) {
       .nav{
           width: 100% !important;
            a{
                width: auto !important;
                padding: 0px 5px;
            }
            .login-button{
                right: auto !important;
                width: 50px !important;
                span{
                    display: none !important;
                }
            }
            .out-login{
                right: auto !important;
                  width: 50px !important;
                transform: translateX(60px) !important;
                span{
                   
                    display: none !important;
                }
            }
         



       }       



             
}



.nav-content{
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    background-color: #3e3d43;
    position:fixed;
    display: flex;
    z-index: 99;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    
    .nav{
        box-sizing: border-box;
        position: relative;
       
        width: 72%;
        height: 100%;

        a,.book-type,.detalist{
            white-space: nowrap;
            cursor: pointer;
            display: inline-block;
            height: 100%;
            width: 100px;
            text-align: center;
            line-height: 50px;
            color:#fff;
            box-sizing: border-box;
            overflow: hidden;
        }
        a:hover,.book-type:hover,.detalist{
            
            border-top: 3px solid red;
            background-color: #000;
        }
         .router-link-active{
             border: none !important;
             background-color: #000 !important;
         }
         .out-login{
             display: inline-block;
             text-align: center;
             right: 0px;
             right:-100px;
             svg{
                 transform: translate(3px,4px);
             }
             
         }
         .out-login,.login-button{
            position:absolute;
             width: 100px;
             height: 100%;
             cursor: pointer;
             box-sizing: border-box;
             line-height: 50px;
         }
        
        
         .login-button{
             
            
             right: 0px;
             cursor: pointer;
             background-color: inherit;
             color:#fff;
              border: 0;
             svg{
                 transform: translate(-1px,7px);
             }
             span{
                 height: inherit;
             }
         }
          .login-button:hover,.out-login:hover{
             background-color: #000;

          }
        
    }

}
</style>